{% extends "base.html" %}

{% block content %}
<!-- 热点管理页面 -->
<div class="content-section">
    <div class="section-header">
        <h2 class="section-title">热点管理</h2>
        <div style="display: flex; gap: 10px;">
            <button class="btn btn-primary" onclick="scrapeTrends()">抓取热点</button>
            <button class="btn btn-primary" onclick="refreshTrends()">刷新</button>
        </div>
    </div>
    <div class="section-content">
        <!-- 筛选器 -->
        <div style="margin-bottom: 20px; display: flex; gap: 15px; align-items: center;">
            <label>数据源：</label>
            <select id="sourceFilter" onchange="filterTrends()">
                <option value="">全部</option>
                <option value="weibo">微博</option>
                <option value="zhihu">知乎</option>
                <option value="baidu">百度</option>
            </select>
            
            <label>状态：</label>
            <select id="statusFilter" onchange="filterTrends()">
                <option value="">全部</option>
                <option value="processed">已处理</option>
                <option value="unprocessed">未处理</option>
            </select>
        </div>

        <!-- 热点列表 -->
        <div id="trendsList">
            {% if trends %}
            <ul class="item-list">
                {% for trend in trends %}
                <li class="item">
                    <div style="flex: 1;">
                        <div class="item-title">{{ trend.title }}</div>
                        <div class="item-meta">
                            来源: {{ trend.source }} | 
                            排名: {{ trend.rank }} | 
                            热度: {{ trend.heat_score }} |
                            时间: {{ trend.created_at.strftime('%Y-%m-%d %H:%M') }}
                        </div>
                        {% if trend.description %}
                        <div style="margin-top: 5px; color: #666; font-size: 0.9rem;">
                            {{ trend.description[:100] }}{% if trend.description|length > 100 %}...{% endif %}
                        </div>
                        {% endif %}
                    </div>
                    <div style="display: flex; flex-direction: column; gap: 5px; align-items: flex-end;">
                        <span class="badge {{ 'badge-success' if trend.processed else 'badge-warning' }}">
                            {{ '已处理' if trend.processed else '未处理' }}
                        </span>
                        <span class="badge badge-info">{{ trend.source }}</span>
                        {% if not trend.processed %}
                        <button class="btn btn-primary" style="font-size: 0.8rem; padding: 0.25rem 0.5rem;" 
                                onclick="generateContent({{ trend.id }})">
                            生成内容
                        </button>
                        {% endif %}
                    </div>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <div class="empty-state">
                <p>暂无热点数据</p>
                <button class="btn btn-primary" onclick="scrapeTrends()">立即抓取</button>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 加载提示 -->
<div id="loadingModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 2rem; border-radius: 10px; text-align: center;">
        <div style="margin-bottom: 1rem;">⏳ 处理中...</div>
        <div id="loadingText">请稍候</div>
    </div>
</div>

<script>
async function scrapeTrends() {
    showLoading('正在抓取热点，请稍候...');
    
    try {
        const response = await fetch('/api/v1/trends/scrape', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({})
        });
        
        const result = await response.json();
        
        if (result.status === 'completed') {
            alert('热点抓取完成！');
            location.reload();
        } else {
            alert('抓取失败：' + (result.message || '未知错误'));
        }
    } catch (error) {
        alert('抓取失败：' + error.message);
    } finally {
        hideLoading();
    }
}

async function generateContent(trendId) {
    showLoading('正在生成内容，请稍候...');
    
    try {
        const response = await fetch('/api/v1/content/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                trend_id: trendId,
                platforms: ['weibo', 'twitter'],
                style: 'default'
            })
        });
        
        const result = await response.json();
        
        if (result.status === 'completed') {
            alert('内容生成完成！');
            location.reload();
        } else {
            alert('生成失败：' + (result.message || '未知错误'));
        }
    } catch (error) {
        alert('生成失败：' + error.message);
    } finally {
        hideLoading();
    }
}

function refreshTrends() {
    location.reload();
}

function filterTrends() {
    const sourceFilter = document.getElementById('sourceFilter').value;
    const statusFilter = document.getElementById('statusFilter').value;
    
    // 这里可以实现前端筛选或重新请求API
    // 为简化实现，直接重新加载页面
    let url = '/admin/trends?';
    if (sourceFilter) url += `source=${sourceFilter}&`;
    if (statusFilter) url += `status=${statusFilter}&`;
    
    window.location.href = url;
}

function showLoading(text) {
    document.getElementById('loadingText').textContent = text;
    document.getElementById('loadingModal').style.display = 'block';
}

function hideLoading() {
    document.getElementById('loadingModal').style.display = 'none';
}
</script>
{% endblock %}